<template>
	<div>
		<div class="header">
			<div class="header-left">
				<img :src="seller.avatar" width="64" height="64">
			</div>
			<div class="header-right" v-if="seller.supports">
				<h1 class="title">
					<span class="titleImg"></span>
					<span class="titleName">{{seller.name}}</span>
				</h1>
				<h2>{{seller.description}}/{{seller.deliveryTime}}分钟送达</h2>
				<p class="pay">
					<span class="payImg">
						<support-ico
						:type="seller.supports[0].type"
						:size="1"
						></support-ico>
					</span>
					<span class="payMsg">{{seller.supports[0].description}}</span>
				</p>
				<div class="brandLength" @click="showBulletin">
					<span>{{seller.supports.length}}个</span>
					<i class="icon-keyboard_arrow_right icon"></i>
				</div>
			</div>
			<div class="headerContent">
				<span class="headerContentTitle"></span>
				<p class="headerContentDetail">{{seller.bulletin}}</p>
				<span class="icon-keyboard_arrow_right icon"></span> 
			</div>
			<div class="headerBackImg">
				<img :src="seller.avatar" width="100%" height="134">
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
	import supportIco from 'components/support-ico/support-ico'

	export default {
		name: 'v-header',
		props: {
			seller: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		methods: {
			showBulletin () {
				this.createBulletinCom = this.createBulletinCom || this.$createBulletin({
					$props: {
						seller: 'seller'
					}
				}).showB();
			}
		},
		components: {
			supportIco
		}
	}
</script>

<style lang="stylus" scoped>
	@import '../../common/stylus/mixin.styl'
	@import '../../common/stylus/variable.styl'
	.header
		height: 134px
		padding: 24px 0 0 24px
		position: relative
		display: flex
		background-color: $color-background-ss
		box-sizing: border-box
		overflow: hidden
		.header-left
			width: 64px
			height: 64px
			margin-right: 16px
			border-radius: 2px
			overflow: hidden
		.header-right
			flex: 0 0 auto
			color: #fff
			.title
				margin-bottom: 8px
				font-size: 0
				.titleImg
					width: 30px
					height: 18px
					display: inline-block
					bg-image: ('brand')
					background-size: 30px 18px
					background-repeat: no-repeat
					vertical-align: top
				.titleName
					margin-left: 6px
					font-size: $fontsize-large-x
					vertical-align: top
					color: #fff
			&
				h2
					font-size: $fontsize-small
					color: rgb(255, 255, 255)
					line-height: 12px
					font-weight: 100
			.pay
				margin-top: 10px
				font-size: 0
				.payImg,.payMsg
					display: inline-block
					vertical-align: top
				.payMsg
					margin-left: 4px
					font-size: $fontsize-small-s
					color: #fff
					line-height: 12px
					font-weight: 100
		.brandLength
			position: absolute
			right: 7px
			top: 67px
			padding: 0 8px
			height: 24px
			font-size: $fontsize-small-s
			background-color: rgba(0,0,0,.2)
			text-align: center
			color: #fff
			line-height: 24px
			border-radius: 15px
			font-weight: 100
			.icon
				margin-left: 2px
		.headerContent
			position: absolute
			left: 0
			right: 0
			bottom: 0
			display: flex
			padding: 0 12px
			height: 28px
			line-height: 28px
			font-size: $fontsize-small-s
			color: #fff
			font-weight: 100
			background-color: $color-background-sss
			.headerContentTitle
				margin-top: 7px
				flex: 0 0 22px
				margin-right: 4px
				width: 22px
				height: 12px
				line-height: 12px
				bg-image: ('bulletin')
				background-size: 22px 12px
				bakcground-repeat: no-repeat
			.headerContentDetail
				font-size: $fontsize-small-s
				white-space: nowrap
				overflow: hidden
				text-overflow: ellipsis
			.icon
				flex: 0 0 10px
				width: 10px
				font-size: $fontsize-small-s
				line-height: 28px
		.headerBackImg
			position: absolute
			top: 0
			left: 0
			right: 0
			bottom: 0
			z-index: -1
			filter: blur(10px)
</style>